<script lang="ts" setup>
import { OrderStatus } from '@/constants/orders';
import { RouteMap, useRouter } from '@/router';
import { useLocale } from '@/locale/locale';
import { computed } from 'vue';
import { format } from 'date-fns';

const { t } = useLocale();
const router = useRouter();

const props = defineProps<{
  index: number;
  orderSn: string;
  status: string;
  name: string;
  countdown: number;
  actualAmount: number;
  orderAmount: number;
  bookingType: number;
  bookingDate: string;
  bookingTime: string;
  bookingCount: number;
}>();

const displayType = computed(() => {
  const value = props.bookingType === 1 ? t('SpaInStoreService') : t('SpaDoorToDoorService');
  return `${t('SpaServiceType')}：${value}`;
});

const displayNumber = computed(() => {
  const label = t('SpaNumber');
  return `${label}：${props.bookingCount}`;
});

const diaplayDateTime = computed(() => {
  const label = t('SpaTime');
  return `${label}：${props.bookingDate} ${props.bookingTime}`;
});

defineEmits(['cancel']);
</script>

<template>
  <view class="p-4 bg-white rounded-lg">
    <view @click="router.to(RouteMap.spaOrderDetails, { orderSn })">
      <view class="flex justify-between items-center mb-2">
        <text class="text-sm text-primary font-medium">
          {{ t('Spa') }}
        </text>
        <view class="flex justify-end items-center flex-1">
          <apt-count-down
            v-if="status === OrderStatus.WAIT_PAY"
            :countdown="countdown"
            @end="$emit('cancel', orderSn)"
          />
          <text v-else-if="status === OrderStatus.HAVE_PAID" class="text-sm text-primary">
            {{ t('LOKey_orderReservationSuccess') }}
          </text>
          <text v-else-if="status === OrderStatus.CANCEL" class="text-sm text-fourth">
            {{ t('LOKey_orderCancel') }}
          </text>
          <text v-else-if="status === OrderStatus.WAIT_CONFIRM" class="text-sm text-fourth">
            {{ t('OrderListWaitConfim') }}
          </text>
          <text v-else-if="status === OrderStatus.CONFIRM_DISAGREE" class="text-sm text-fourth">
            {{ t('DiningPreOrderBookFailed') }}
          </text>
          <text v-else-if="status === OrderStatus.CONFIRMED" class="text-sm text-fourth">
            {{ t('OrderListConfirmed') }}
          </text>
          <text v-else-if="status === OrderStatus.ORDER_SUCCESS" class="text-sm text-fourth">
            {{ t('LOKey_orderReservationSuccess') }}
          </text>
          <text v-else-if="status === OrderStatus.OVERDUE" class="text-sm text-fourth">
            {{ t('OrderListOverdue') }}
          </text>
          <text v-else class="text-sm text-fourth">
            {{ t('OrderListComplete') }}
          </text>
        </view>
      </view>
      <view class="text-lg text-primary font-medium mb-1">
        {{ name }}
      </view>
      <view class="text-base text-fourth mb-1">{{ displayType }}</view>
      <view class="text-base text-fourth mb-1">{{ displayNumber }}</view>
      <view class="text-base text-fourth mb-3">{{ diaplayDateTime }}</view>
      <view class="flex justify-end items-center mb-3">
        <template v-if="status === OrderStatus.WAIT_PAY">
          <text class="mr-1 text-sm text-primary">{{ t('LOKey_shouldPay') }}</text>
          <text class="text-lg text-primary font-medimu">
            {{ t('LPKey_moneyX', { money: actualAmount }) }}
          </text>
        </template>
        <template v-else>
          <text class="mr-1 text-sm">{{ t('LOKey_orderAmount') }}</text>
          <text class="text-lg text-primary font-medimu">
            {{ t('LPKey_moneyX', { money: orderAmount }) }}
          </text>
        </template>
      </view>
    </view>
    <view v-if="status === OrderStatus.WAIT_PAY" class="mt-2_5 flex justify-end items-center">
      <uv-button
        :text="t('LOKey_cancelReservation')"
        size="small"
        @click.stop="$emit('cancel', orderSn)"
      />
      <uv-button
        :text="t('LRKey_payNow')"
        custom-style="margin-left: 20rpx; background: #FF5A60;border-color: #FF5A60"
        size="small"
        type="primary"
        @click.stop="
          router.to(RouteMap.payment, {
            id: orderSn,
            countdown: Math.abs(countdown),
            amount: actualAmount,
            createTime: format(new Date(), 'yyyy-MM-dd'),
            from: 'spa',
            isFromOrder: true,
            orderIndex: index
          })
        "
      />
    </view>
  </view>
</template>
